<template>
  <div class="wrapper">
    <header>
      <router-link to="/">主页</router-link>
      &nbsp;&nbsp;
      <router-link to="/panda?name=和和&age=5">熊猫(和和)</router-link>
      &nbsp;&nbsp;
      <router-link :to="{ name: 'panda' , query: { name: '美美' , age: 6 } }">熊猫(美美)</router-link>
      &nbsp;&nbsp;
      <router-link to="/loong?name=敖广&age=40">中国龙(敖广)</router-link>
      &nbsp;&nbsp;
      <router-link to="/loong?name=敖润&age=30">中国龙(敖润)</router-link>
      &nbsp;&nbsp;
      <a href="https://v3.cn.vuejs.org/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90">
        组件的生命周期
      </a>
    </header>
    <hr>
    <main>
      <router-view></router-view>
    </main>
    <div>
      <dynamic-view></dynamic-view>
    </div>
    <div>
      <topic-view></topic-view>
    </div>
  </div>
</template>

<script>
import DynamicView from '@/views/DynamicView.vue';
import TopicView from '@/views/TopicView.vue';

export default {
  name: 'App',
  components: {
    'dynamic-view': DynamicView,
    'topic-view': TopicView
  }
}
</script>

<style>
</style>
